<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="number" v-model.number="n1" /> +
      <input type="number" v-model.number="n2" /> =
      <!-- <span>{{sum()}}</span> -->
      <span>{{total}}</span>
      <hr />
      <h3>{{total}}</h3>
      <h3>{{total}}</h3>
      <h3>{{total}}</h3>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            n1: 1,
            n2: 2
          }
        },
        methods: {
          // 在依赖项没有发生改变时，多次调用，它还是会重新计算，性能不是太理想
          sum() {
            console.log('sum -- methods')
            // 在此函数中n1和n2就是依赖项
            return this.n1 + this.n2
          }
        },
        // 计算属性
        // 计算属性它必须要有返回值，返回值还不能是异步的
        // 它的依赖项可以有1个也可以是N个
        // 如果依赖项没有发生变化，在下一次调用时走上一次的缓存结果
        // 计算属性可以起到优化的作用
        computed: {
          total() {
            console.log('total -- computed')
            // 在此函数中n1和n2就是依赖项
            return this.n1 + this.n2
          }
        }
      })
      app.mount('#app')

      // class Person {
      //   _name = 'abc'

      //   fn(){
      //     return 'abc'
      //   }

      //   // 访问器
      //   get name() {
      //     return 'aaaa' + this._name+this.fn()
      //   }
      //   // 修改器
      //   set name(value) {
      //     let n = '@@@' + value
      //     this._name = n
      //   }
      // }

      // const p = new Person()
      // p.name
      // p.name = 'aaaaa'
    </script>
  </body>
</html>
